<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4_函数组件使用props</title>
</head>
<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <div id="test1"></div>
    <div id="test2"></div>

    <!-- 引入react核心库 -- React --> 
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作DOM  -- ReactDOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel 用于将jsx转换为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types 用于对组件标签属性进行限制  -- PropTypes -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">  // 此处一定要写babel
    // 1. 创建组件
    function Person(props) {
      const {name, age, sex} = props
          return(
            <ul>
                <li>姓名：{name}</li>
                <li>性别：{sex}</li>
                <li>年龄：{age}</li>
            </ul>
          )
    }
    // 对标签属性进行类型、必要性的限制
    Person.propTypes = {
      name: PropTypes.string.isRequired, //限制name必传，且为字符串
      sex: PropTypes.string, //限制sex为字符串
      age: PropTypes.number, //限制age为函数
    }
    // 指定默认标签属性值
    Person.defaultProps = {
      sex: '男', //sex默认值为男
      age: 18  //age默认值为18
    }
    // 2. 渲染虚拟组件到页面
    ReactDOM.render(<Person name='tom' />, document.getElementById('test'))

    </script>
</body>
</html>